<template>
  <view>
    <view class="keyword-view clearfix">
      <view class="float_left">
        <u-search
          @clear="searchList"
          @search="searchList"
          :show-action="false"
          :clearabled="true"
          placeholder="商品名称/编码/条码"
          v-model="keyword"
        ></u-search>
      </view>
      <view
        v-if="$accessCheck($Access.BaseDataListSearch)"
        class="float_right"
        @click="openSel('search_show')"
        ><text class="custom-icon custom-icon-shaixuan"></text
      ></view>
    </view>
    <view class="main-view clearfix">
      <view class="left-view float_left">
        <scroll-view scroll-y="true" class="left-scroll">
          <view
            class="cate-li"
            :class="[!category_id ? 'cate-on' : '']"
            @click="changeCate(0)"
            >全部</view
          >
          <view
            class="cate-li"
            v-for="(item, index) in category_list"
            :key="index"
            @click="changeCate(item.id)"
            :class="[category_id === item.id ? 'cate-on' : '']"
          >
            {{ item.title }}
          </view>
        </scroll-view>
      </view>
      <view class="rigth-view float_left">
        <scroll-view
          scroll-y="true"
          class="rigth-scroll"
          @scrolltolower="moreGoods"
          :scroll-top="scrollTop"
        >
          <view
            class="goods-li"
            v-for="(item, index) in goods_list"
            :key="index"
          >
            <view class="goods-main clearfix">
              <image
                class="goods-img float_left"
                :src="item.images[0]"
                mode="aspectFill"
              ></image>
              <view class="goods-info float_left">
                <view class="goods-name ellipsis">{{ item.title }}</view>
                <view class="goods-code">{{ item.code }}</view>
                <view class="goods-tag">
                  <u-tag
                    class="tag-li"
                    mode="plain"
                    size="mini"
                    :text="item.categoryTitle"
                  />
                  <u-tag
                    class="tag-li"
                    size="mini"
                    :text="item.enableStatus === 5 ? '启用' : '禁用'"
                  />
                  <u-tag
                    class="tag-li"
                    v-if="item.brandTitle"
                    size="mini"
                    type="success"
                    :text="item.brandTitle"
                  />
                </view>
              </view>
            </view>
            <view class="handel-btn">
              <view
                class="btn-li"
                v-if="$accessCheck($Access.BaseDataListUpdateEnableStatus)"
                @click="updateEnableStatusGoods(item)"
              >
                {{ item.enableStatus === 5 ? "禁用" : "启用" }}
              </view>
              <view
                class="btn-li"
                @click="goPage('/pagesT/goods/addGoods?id=' + item.id)"
                v-if="$accessCheck($Access.EditBaseData)"
                >编辑</view
              >
              <view
                v-if="$accessCheck($Access.BaseDataListDetail)"
                class="btn-li"
                @click="goPage('/pagesB/goods/goodsDetail?id=' + item.id)"
                >查看</view
              >
              <!-- <view class="btn-li" @click="goPage('/pagesB/goods/goodsDetail?id=' + item.id)">发布</view> -->
            </view>
          </view>
          <u-loadmore v-if="goods_list.length" :status="load_status" />
          <view v-if="!goods_list.length" class="empty-view"
            ><u-empty text="暂无商品" mode="favor"></u-empty
          ></view>
        </scroll-view>
      </view>
    </view>
    <addBtn
      v-if="$accessCheck($Access.AddBaseData)"
      url="/pagesT/goods/addGoods"
    ></addBtn>
    <u-popup v-model="search_show" mode="right">
      <view class="search-pop">
        <view class="form-view">
          <u-form label-width="160rpx" label-position="left">
            <u-form-item label-position="top" label="销售状态">
              <text
                v-for="(item, index) in status_list"
                :key="index"
                class="check-li"
                :class="[enableStatus === item.value ? 'active' : '']"
                @click="statusChange(item)"
              >
                {{ item.label }}
              </text>
            </u-form-item>
            <u-form-item label="品牌">
              <view
                class="clearfix form-val"
                @click="goPage('/pagesT/brand/selBrand')"
              >
                <text class="float_left ellipsis">{{
                  brandId ? brand_name : "请选择"
                }}</text>
                <view class="float_right" @click.stop="clearValue('brandId')">
                  <u-icon
                    :name="!brandId ? 'arrow-right' : 'close-circle-fill'"
                    size="28"
                    color="#999999"
                  ></u-icon>
                </view>
              </view>
            </u-form-item>
          </u-form>
        </view>

        <view class="search-btn">
          <view class="btn-li btn-reset" @click="clearValue()">重置</view>
          <view class="btn-li btn-submit" @click="searchList">确定</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      load_status: "nomore",
      tab_current: 0,
      status_list: [
        {
          label: "启用",
          value: 5,
        },
        {
          label: "禁用",
          value: 4,
        },
      ],
      category_list: [], // 分类列表
      category_id: "", // 分类id
      auditStatus: 2, // 审核状态
      isOption: "", // 是否是自选商品
      page: 1,
      pageSize: 10,
      total: 0,
      goods_list: [],
      brandId: "", //品牌
      brand_name: "",
      keyword: "", //关键词
      enableStatus: "", //上下架
      brandData: {},
      search_show: false,
      scrollTop: -1,
    };
  },
  watch: {
    brandData(val) {
      if (val.id) {
        this.brandId = val.id;
        this.brand_name = val.title;
      }
    },
  },
  onLoad() {
    this.getAllCategory();
  },
  onShow() {
    this.page = 1;
    this.getData();
  },
  methods: {
    updateEnableStatusGoods(row) {
      uni.showModal({
        title: "提示",
        content: `确定要${row.enableStatus === 5 ? "禁用" : "启用"}该商品吗？`,
        success: (res) => {
          if (res.confirm) {
            this.$u.api
              .updateEnableStatusGoods({
                enableStatus: row.enableStatus === 5 ? 4 : 5,
                id: [row.id],
              })
              .then((res) => {
                this.$u.toast("操作成功");
                this.searchList();
              });
          }
        },
      });
    },
    //  获取所有商品分类
    getAllCategory() {
      this.$u.api
        .getAllCategory({
          enableStatus: 5,
        })
        .then((res) => {
          this.category_list = res.data;
        });
    },
    // 切换分类
    changeCate(id) {
      this.scrollTop = 0;
      this.$nextTick(() => {
        this.scrollTop = -1;
      });
      this.category_id = id;
      this.searchList();
    },
    // 滚动到底部，触发上拉加载
    moreGoods() {
      if (this.total / this.pageSize > this.page) {
        this.page += 1;
        this.getData();
      }
    },
    searchList() {
      this.search_show = false;
      this.page = 1;
      this.getData();
    },
    // 判断当前使用方法为列表接口还是搜索引擎接口 获取列表数据
    getData() {
      // 搜索参数规整
      const obj = {
        keyword: this.keyword,
        brandId: this.brandId,
        categoryPath: this.category_id,
        enableStatus: this.enableStatus,
      };
      const isKey = this.$utils.isSerch(obj);
      if (isKey) {
        this.searchGoods();
      } else {
        this.getAllGoodsBasic();
      }
    },
    // 获取商品列表
    getAllGoodsBasic() {
      this.load_status = "loading";
      let params = {
        page: this.page,
        pageSize: this.pageSize,
      };
      this.$u.api.getAllGoodsBasic(params).then((res) => {
        if (this.page === 1) {
          this.goods_list = res.data;
        } else {
          this.goods_list = this.goods_list.concat(res.data);
        }
        this.total = res.pageTotal;
        this.load_status = this.$utils.loadStatus(
          this.page,
          this.pageSize,
          this.total
        );
      });
    },
    // 商品搜索
    searchGoods() {
      this.load_status = "loading";
      let params = {
        keyword: this.keyword,
        brandId: this.brandId,
        categoryPath: this.category_id,
        enableStatus: this.enableStatus,
        page: this.page,
        pageSize: this.pageSize,
      };
      this.$u.api.searchGoods(params).then((res) => {
        if (this.page === 1) {
          this.goods_list = res.data;
        } else {
          this.goods_list = this.goods_list.concat(res.data);
        }
        this.total = res.pageTotal;
        this.load_status = this.$utils.loadStatus(
          this.page,
          this.pageSize,
          this.total
        );
      });
    },
    statusChange(val) {
      this.enableStatus = val;
    },
    clearValue(key) {
      if (!key) {
        this.keyword = "";
        this.brandId = "";
        this.category_id = "";
        this.enableStatus = "";
        this.searchList();
      } else {
        this[key] = "";
      }
    },
    openSel(key) {
      this[key] = true;
    },
  },
};
</script>

<style scoped lang="scss">
.keyword-view {
  background-color: #ffffff;
  padding: 20rpx 24rpx;
  .float_left {
    width: 640rpx;
  }
  .float_right {
    line-height: 64rpx;
    width: 50rpx;
    text-align: center;
    color: #666666;
  }
}
.main-view {
  .left-view {
    width: 168rpx;
    background-color: #f7f8fa;
    .left-scroll {
      width: 100%;
      height: calc(100vh - 106rpx);
      .cate-li {
        line-height: 90rpx;
        padding-left: 36rpx;
        color: #666666;
      }
      .cate-on {
        background-color: #ffffff;
        color: #000000;
        position: relative;
        &::before {
          content: "";
          display: block;
          width: 6rpx;
          height: 20rpx;
          background-color: $uni-color-primary;
          position: absolute;
          left: 14rpx;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
  .rigth-view {
    width: calc(100% - 168rpx);
    background-color: #ffffff;
    .rigth-scroll {
      width: 100%;
      height: calc(100vh - 106rpx);
      .goods-li {
        padding: 20rpx;
        border-bottom: 1px solid #f5f5f5;
        position: relative;
        .goods-main {
          .goods-img {
            border-radius: 10rpx;
            width: 156rpx;
            height: 156rpx;
            margin-right: 20rpx;
          }
          .goods-info {
            width: 366rpx;
            .goods-name {
              -webkit-line-clamp: 1;
            }
            .goods-code {
              font-size: 24rpx;
              padding-top: 6rpx;
            }
            .goods-tag {
              padding: 10rpx 0;
              .tag-li {
                margin-right: 14rpx;
              }
            }
            .goods-num {
              color: #999999;
              font-size: 22rpx;
              text {
                padding-right: 10rpx;
              }
            }
          }
        }
        .handel-btn {
          display: flex;
          .btn-li {
            font-size: 24rpx;
            line-height: 50rpx;
            flex: 3;
            text-align: center;
            border: 1px solid #dddddd;
            margin: 20rpx 10rpx 0;
            border-radius: 8rpx;
          }
        }
        .more-btn {
          position: absolute;
          right: 20rpx;
          bottom: -120rpx;
          background-color: #ffffff;
          border-radius: 10rpx;
          padding: 0 20rpx;
          z-index: 9;
          box-shadow: 0px 3px 24rpx rgba(0, 0, 0, 0.1);
          .more-btn-li {
            font-size: 24rpx;
            line-height: 60rpx;
            text-align: center;
            border-bottom: 1px solid #f5f5f5;
            &:last-child {
              border: 0 none;
            }
          }
        }
      }
    }
  }
}
.search-btn {
  .btn-reset {
    color: #fb5904 !important;
  }
  .btn-submit {
    background-color: #fb5904 !important;
  }
}
.search-pop {
  .active {
    border-color: #fb5904 !important;
    color: #fb5904 !important;
  }
}
</style>
